<template>
  <div class="compilationSummary-tab2">
    <div>
      <el-form :inline="true" :model="form" label-width="70px" class="formList">
        <el-form-item label="预算年度">
          <el-date-picker v-model="form.month" type="month" placeholder="选择年" value-format="yyyyMM"></el-date-picker>
        </el-form-item>
        <el-form-item class="wid100">
          {{form.autoService ? '自服务':'全业务'}}
          <el-switch v-model="form.autoService"></el-switch>
          <el-button size="small" style="margin-left: 12px" type="primary" @click="search">查询</el-button>
          <!--          <el-button size="small" type="orange" @click="batchxport()">批量导出</el-button>-->
          <el-button size="small" type="orange" @click="exportModal()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column
          label="类别(单位：万元)"
          prop="class1"
          class-name="first-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="class2"
          class-name="second-title"
          min-width="50"
          fixed
        ></el-table-column>
        <el-table-column
          label="类别(单位：万元)"
          prop="indexName"
          class-name="third-title"
          min-width="130"
          fixed
        ></el-table-column>
        <el-table-column
          min-width="100"
          v-for="(key,value) in areaMap"
          :key="key"
          :label="key"
          :prop="value"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
export default {
  name: "transverseIncome-tab2",
  data() {
    return {
      rowData: [],
      areaMap: '',
      spanArr: [],
      tableData: [],
      colList: [],
      newArr: [],
      tableLoading: false,
      flag: 0,
      form: {
        month: "",
        areaId: "",
        autoService: false,
      },
      backRecord: false,
      accountInfo: "",
    };
  },
  watch: {
    rowData(val) {
      this.tableData = this.rowData;
    },
  },
  created() {
    let query = this.$route.query;
    this.backRecord = typeof query.backRecord === undefined ? true : false;
    let dd = new Date();
    let month = dd.getMonth();
    month = month < 10 ? "0" + month : month;
    this.form.month = dd.getFullYear() + month;
    if (this.backRecord) {
      this.form.areaId = query.areaId;
    } else {
      this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      this.form.areaId = this.accountInfo.areaId;
    }
  },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.tableData.length > 0) {
        if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
          return this.spanArr.length && this.spanArr[rowIndex][columnIndex];
        }
      }
    },
    //查询
    search() {
      let params = {
        acctMonth: this.form.month,
        areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
        autoService: this.form.autoService,
        flag: this.flag,
      };
      this.listResourceData(params);
    },
    listResourceData(params) {
      console.log(params);
      $budgetAPI.budgetHorizontalIncome(
        params,
        (res) => {
          if (res.code == 0) {
            this.tableData = [];
            this.colDefList = [];
            this.tableData = res.content.data;
            this.tableData.forEach((item) => {
              Object.assign(item, item.map);
            });
            console.log(this.tableData);
            // this.colDefList = res.content.columns;
            this.areaMap = res.content.areaMap;
            this.showFlag = true;
            this.renderData();
            this.$refs.tab1.tableLoading = false;
          } else {
            this.alertError(res);
          }
        },
        (err) => {}
      );
    },
    renderData() {
      this.newArr = [];
      this.flag = 0;
      this.classify(this.colList);
      console.log(this.tableData);
      this.spanArr = mergeSpan(this.tableData, [
        "class1",
        "class2",
        "indexName",
      ]);
      console.log(this.spanArr);

      setTimeout(() => {
        this.$refs.table.doLayout();
      }, 1200);
    },
    classify(arr) {
      this.newArr = arr;
    },
    //导出
    exportModal() {
      let areaId = this.form.areaId;
      let month = this.form.month;
      let token = getCookie("token");
      // 根据不同模式切换不同的路径
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          `/api/budgetHorizontalIncome/exportIncomeData?&autoService=${this.form.autoService}&acctMonth=${month}&token=${token}`;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          `/api/budgetHorizontalIncome/exportIncomeData?autoService=${this.form.autoService}&acctMonth=${month}&token=${token}`;
      }
    },
    // 批量导出
    batchxport() {
      let areaId = this.form.areaId;
      let month = this.form.month;
      let token = getCookie("token");
      // this.exportLoad = true;
      // 根据不同模式切换不同的路
      // $budgetAPI.downloadBatch(
      //  {
      //    areaId:areaId,
      //    month:month,
      //    token:token,
      //  },
      //   res => {
      // if (res.code == 0) {
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          `/api/budgetHorizontalIncome/exportIncomeData?areaId=${areaId}&autoService=${this.form.autoService}&month=${month}&token=${token}`;
        // this.exportLoad = false;
        // console.log(code)
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
          `/api/budgetHorizontalIncome/exportIncomeData?areaId=${areaId}&autoService=${this.form.autoService}&month=${month}&token=${token}`;
        // this.exportLoad = false;
        // console.log(code)
      }
      // }
      // }, err => {}

      //  );
    },
    // 获取年份
    getmonth() {
      $budgetAPI.getBudgetmonth(
        {},
        (res) => {
          if (res.code == 0) {
            this.form.month = res.content;
            let params = {
              acctMonth: this.form.month,
              areaId: this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId,
              autoService: this.form.autoService,
              flag: this.flag,
            };
            this.listResourceData(params);
          } else {
            this.alertError(res);
          }
        },
        (err) => {}
      );
    },
  },
};
</script>

<style lang="scss">
.compilationSummary-tab2 {
  .first-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .second-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .third-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-60px);
      white-space: nowrap;
      overflow: visible;
    }
  }
  /deep/ .third-title .cell {
    text-align: center;
  }
}
</style>
